<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .lock{width:140px;height:30px;line-height: 30px;background:#00f;
            color:#fff;font-size:14px;text-align:center;border-radius:5px;
            cursor:pointer;margin-top:30px;}
        .unlock{width:140px;height:30px;line-height: 30px;background:#666;
            color:#ccc;font-size:14px;text-align:center;border-radius:5px;
            cursor:pointer;margin-top:30px;}
    </style>

</head>
<body>
<div class="lock" id="btn">锁定</div>
<script>
    //DOM00级事件：1.通过DOM获取HTML元素  2.（获取HTML元素）.事件=执行脚本
    // 获取按钮
    var btn=document.getElementById("btn");

    //给按钮绑定事件,this是对该DOM元素的引用
    btn.onclick=function(){
       // 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
       if(this.className=="lock"){
           this.className="unlock";
           this.innerHTML="解锁";
       }else{
           this.className="lock";
           this.innerHTML="锁定";
       }
//       if(this.innerHTML=="锁定"){
//           this.className="unlock";
//           this.innerHTML="解锁";
//       }else{
//           this.className="lock";
//           this.innerHTML="锁定";
//       }
    }
</script>

</body>
</html>